<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		#main {
			border: 1px solid;
		}
		
		#button {
			border: 1px solid;
			/*height: 25px;*/
		}
		#button button{
			/*height: 50%;
			font-size: 13px;*/
		}
		
		#ed_test {
			width: 300px;
			height: 30px;
			border: 2px solid red;
			float: left;
		}
		
		#ed_test span {
			font-size: 16.3333px !important;
		}
	</style>

	<body>
		<input type="" name="" id="" value="" />
		<div id="main">
			<div contentEditable="true" id="ed_test" onblur="ed_test_bulr()"> </div>
			<div id="button">
				<button type="button" id="button1" onclick="document.getElementById('ed_test').focus(); insertHtmlAtCaret(1);">&and;</button><br />
				<button type="button" id="button2" onclick="document.getElementById('ed_test').focus(); insertHtmlAtCaret(2);">&or;</button>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		function ed_test_bulr() {
			console.log("fadsfc")
		}

		function insertHtmlAtCaret(type) {
			var txt;
			if(document.selection) {
				txt = document.selection.createRange().text.toString();
			} else {
				txt = document.getSelection().toString();
			}
			var html;
			if(type == 1) {
				html = "<sup>" + txt + "</sup>";
			} else {
				html = "<sub>" + txt + "</sub>";
			}
			var sel, range;
			if(txt != "") {
				if(window.getSelection) {
					// IE9 and non-IE
					sel = window.getSelection();
					if(sel.getRangeAt && sel.rangeCount) {
						range = sel.getRangeAt(0);
						range.deleteContents();
						// Range.createContextualFragment() would be useful here but is
						// non-standard and not supported in all browsers (IE9, for one)
						var el = document.createElement("div");
						el.innerHTML = html;
						var frag = document.createDocumentFragment(),
							node, lastNode;
						/*console.log(el);
						console.log(node);
						console.log(el.firstChild);*/
						while((node = el.firstChild)) {
							lastNode = frag.appendChild(node);
						}
						/*console.log(frag);*/
						range.insertNode(frag);
						/*console.log(range);*/
						// Preserve the selection
						/*console.log(lastNode);*/
						if(lastNode) {
							range = range.cloneRange();
							range.setStartAfter(lastNode);
							range.collapse(true);
							sel.removeAllRanges();
							sel.addRange(range);
						}
						/*console.log(range);*/
					}
				} else if(document.selection && document.selection.type != "Control") {
					// IE < 9
					document.selection.createRange().pasteHTML(html);
				}
			}
		}
	</script>

</html>